import React, {useCallback } from 'react';
import { Accordion, List } from 'antd-mobile';
import { Listdiv } from './showSttyled'
import { useHistory } from 'react-router-dom'


const Listshow = (props) => {
    const history = useHistory()

    const onChange = useCallback((name) => {
        return () => {
            history.push('/model', name)
        }
    },[history])

    return (
        <Listdiv >
            <Accordion className="my-accordion">
                {
                    props.list.length>0 && props.list.map(v => {
                        return (
                            <Accordion.Panel header={(<h2> <span>{v.dyName}</span></h2>)} key={v.dyId}>
                                <List className="my-list">
                                    {
                                        v.kjnames.map(item => {
                                            return (
                                                <List.Item key={item.kjId} onClick={onChange(item.kjName)}>{item.kjName}</List.Item>
                                            )
                                        })
                                    }
                                </List>
                            </Accordion.Panel>
                        )
                    })
                }
            </Accordion>
        </Listdiv>
    );
}

export default Listshow;
